<template>
  <div class="sidebar">
      <div class="widget">
        <h3 class="widget-title">标签</h3>
        <div class="widget-tags-box clearfix">
          <nuxt-link v-if="item.articles_num>0" :to="`/tags/${item.id}`" v-for="(item,index) in tags" :key="item+index">{{item.name}}({{item.articles_num}})</nuxt-link>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  props:{
    tags:{
      type:Array,
      default:()=>([])
    }
  }
}
</script>
<style lang="scss">
  .widget{
    clear: both;
    margin-bottom: 10px;
    background-color: #fff;
    h3.widget-title{
      font-size: 18px;
      color: #666;
      border-bottom: 1px solid #eaeaea;
      background-color: #fbfbfb;
      margin: 0;
      padding: 11px 15px 10px;
    }
    .widget-tags-box{
      padding: 12px 13px 10px 15px;
      a{
        color: #999;
        background-color: #f6f6f6;
        float: left;
        width: 31.3333%;
        margin: 0 1% 1% 0;
        padding: 0 8px;
        font-size: 12px;
        height: 29px;
        line-height: 29px;
        overflow: hidden;
      }
    }
  }
  
</style>

